<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-control" content="no-cache" />
    <title>多文件上传</title>
</head>
<body>

    <form action="">
        <div>
            <div id="file_list">
                
            </div>
            <button type="button" id="file_add">增加</button>
            <button type="button">上传</button>
        </div>
    </form>
</body>

<script type="text/javascript">
    ~(function(){

        initFileUpload(
            document.getElementById('file_list'), 
            document.getElementById('file_add')
        )


        /**
         * filelist 文件列表元素
         * addBtn 增加按钮元素
         */
        function initFileUpload(filelist, addBtn){
            addBtn.onclick = function(){
                filelist.insertAdjacentHTML('beforeend', '<div class="file-item"><button class="remove-item" type="button">x</button><input type="file"></div>')
            }

            filelist.onclick = function(event){
                var event = event || window.event;
                var target = event.target || event.srcElement;

                if(target.className.indexOf('remove-item') >= 0){
                    var fileitem = target.parentElement;
                    fileitem.parentNode.removeChild(fileitem)
                }
            }
        }

    })();
</script>
</html>

